<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <father></father>
        </div>
        <template id="father">
            <div>
                <son >
                    <template slot-scope="abc">
                        <div>
                            填充内容 {{ abc.names }}
                        </div>
                    </template>
                </son>
            </div>
        </template>

        <template id="son">
            <div>
                <p>头</p>
                <slot v-bind:names="names">默认内容 {{ names }}</slot>
                <p>尾</p>
            </div>
        </template>
        <script>

            Vue.component("father",{
                template:"#father",
                data:function(){
                    return {
                        name:"aaa",
                        age:28
                    }
                },
                
                // 子组件
                components: {
                    "son": {
                        template:"#son",
                        data() {
                            return {
                                names:["aa", "bb"]
                            }
                        },
                    }
                }
            })
            

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                },
                //  专门用于存储监听事件的回调函数
                methods: {
                    
                },
                // 专门用于定义计算数据性
                computed:{

                },
                // 专门用于定义局部组件
                comments:{
                    "home":{
                        template:"#home"
                    }
                }
            });
        </script>
    </body>
</html>